<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'

const createFlower = () => {
  const container = document.getElementById('flower-container')
  const flower = document.createElement('div')
  flower.className = 'flower'
  flower.innerText = '🌸'
  
  // 设置初始位置（从页面顶部任意位置飘落）
  const startLeft = Math.random() * 100
  flower.style.left = `${startLeft}vw`
  flower.style.top = '-50px'
  
  // 设置大小、透明度、动画时长
  flower.style.fontSize = `${Math.random() * 15 + 15}px`
  flower.style.opacity = `${Math.random() * 0.5 + 0.5}`
  flower.style.animationDuration = `${Math.random() * 5 + 5}s`
  
  // 随机设置水平漂移（左右最大50vw）
  const xDrift = (Math.random() * 100 - 50).toFixed(2) // -50 ~ 50
  flower.style.setProperty('--x-drift', `${xDrift}vw`)
  
  container.appendChild(flower)
  
  flower.addEventListener('animationend', () => {
    flower.remove()
  })
}

const startFlowerEffect = () => {
  const interval = setInterval(createFlower, 150) // 每 200 毫秒生成一个花
  setTimeout(() => clearInterval(interval), 5000) // 5 秒后停止生成花
}

const router = useRouter()

onMounted(() => {
  router.afterEach(() => {
    startFlowerEffect() // 路由切换时触发飞花效果
  })
})
</script>

<template>


<div id="flower-container"></div>

<router-view />

</template>

<style >
#flower-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.flower {
  position: absolute;
  animation: fall linear forwards;
  user-select: none;
  will-change: transform;
  color: #f48fb1;
}

/* 飘落动画，包含旋转和水平漂移 */
@keyframes fall {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(var(--x-drift, 0)) translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}
</style>